import React from 'react';
import {
  Row,
  Col,
  Card,
  Table,
} from 'antd';

import styles from './index.module.less';

export default class LogisticsScheduleDetail extends React.Component {
  state = {
    orderType: 2,
    orderData: [
      {
        key: 1,
        orderNo: '1212121212',
        info: {
          img: 'https://gd2.alicdn.com/imgextra/i2/2846819868/TB2kVA8GeuSBuNjSsziXXbq8pXa_!!2846819868.jpg',
          name: '测试',
        },
        receiptInfo: {
          name: '测试',
          mobile: '0571-88888888',
          address: '测试测试',
        },
        dischargeInfo: {
          name: '测试',
          mobile: '0571-88888888',
          address: '测试测试',
        },
      },
    ],
  };

  render() {
    const { orderType, orderData } = this.state;

    const columns = [
      {
        key: 'orderNo',
        title: '订单号',
        dataIndex: 'orderNo',
      },
      {
        key: 'info',
        title: '货品信息',
        dataIndex: 'info',
        render: (text, record) => {
          return (
            <div className={styles.clearfix}>
              <div className={`${styles.pullLeft} ${styles.goodsImg}`}>
                <img src={record.info.img} alt='图片' />
              </div>
              <div className={`${styles.pullLeft}`}>
                {record.info.name}
              </div>
            </div>
          );
        },
      },
      {
        key: 'receiptInfo',
        title: '收货信息',
        dataIndex: 'receiptInfo',
        render: (text, record) => {
          return (
            <React.Fragment>
              <Row>
                <Col className={styles.clearfix} span={4}>
                  <span className={styles.pullLeft}>联系人</span>
                  <span className={styles.pullRight}>：</span>
                </Col>
                <Col span={20}>
                  {record.receiptInfo.name}
                </Col>
              </Row>
              <Row>
                <Col className={styles.clearfix} span={4}>
                  <span className={styles.pullLeft}>联系方式</span>
                  <span className={styles.pullRight}>：</span>
                </Col>
                <Col span={20}>
                  {record.receiptInfo.mobile}
                </Col>
              </Row>
              <Row>
                <Col className={styles.clearfix} span={4}>
                  <span className={styles.pullLeft}>收货地址</span>
                  <span className={styles.pullRight}>：</span>
                </Col>
                <Col span={20}>
                  {record.receiptInfo.address}
                </Col>
              </Row>
            </React.Fragment>
          );
        },
      },
      {
        key: 'dischargeInfo',
        title: '卸货信息',
        dataIndex: 'dischargeInfo',
        render: (text, record) => {
          return (
            <React.Fragment>
              <Row>
                <Col className={styles.clearfix} span={4}>
                  <span className={styles.pullLeft}>联系人</span>
                  <span className={styles.pullRight}>：</span>
                </Col>
                <Col span={20}>
                  {record.dischargeInfo.name}
                </Col>
              </Row>
              <Row>
                <Col className={styles.clearfix} span={4}>
                  <span className={styles.pullLeft}>联系方式</span>
                  <span className={styles.pullRight}>：</span>
                </Col>
                <Col span={20}>
                  {record.dischargeInfo.mobile}
                </Col>
              </Row>
              <Row>
                <Col className={styles.clearfix} span={4}>
                  <span className={styles.pullLeft}>卸货地址</span>
                  <span className={styles.pullRight}>：</span>
                </Col>
                <Col span={20}>
                  {record.dischargeInfo.address}
                </Col>
              </Row>
            </React.Fragment>
          );
        },
      },
    ];

    return (
      <div className={styles.wrapperBox}>
        <Card
          bordered={false}
          title='申请单详情'
          headStyle={{ padding: '0 20px' }}
          bodyStyle={{ padding: 20 }}
        >
          <Row className={styles.rowBox}>
            <Col className={styles.textLightBlue}>
              申请单详情
            </Col>
          </Row>
          <Row className={styles.rowBox}>
            <Col className={`${styles.clearfix} ${styles.textLightDark}`} span={2}>
              <span className={styles.pullLeft}>申请单类型</span>
              <span className={styles.pullRight}>：</span>
            </Col>
            <Col className={styles.textLightOrange} span={22}>
              {orderType === 1 ? '零担申请' : '租车申请'}
            </Col>
          </Row>
          <Row className={styles.rowBox}>
            <Col className={`${styles.clearfix} ${styles.textLightDark}`} span={2}>
              <span className={styles.pullLeft}>申请单号</span>
              <span className={styles.pullRight}>：</span>
            </Col>
            <Col className={styles.textGray} span={22}>
              1231231231231321
            </Col>
          </Row>
          {
            orderType === 1 && (
              <React.Fragment>
                <Row className={styles.rowBox}>
                  <Col className={styles.textLightBlue}>
                    装卸信息
                  </Col>
                </Row>
                <Row className={styles.rowBox}>
                  <Col className={`${styles.clearfix} ${styles.textLightDark}`} span={2}>
                    <span className={styles.pullLeft}>上门提货时间</span>
                    <span className={styles.pullRight}>：</span>
                  </Col>
                  <Col className={styles.textGray} span={22}>
                    2018-11-08 12:00
                  </Col>
                </Row>
                <Row className={styles.rowBox}>
                  <Col className={`${styles.clearfix} ${styles.textLightDark}`} span={2}>
                    <span className={styles.pullLeft}>期望送达时间</span>
                    <span className={styles.pullRight}>：</span>
                  </Col>
                  <Col className={styles.textGray} span={22}>
                    2018-11-08 12:00
                  </Col>
                </Row>
              </React.Fragment>
            )
          }
          <Row className={styles.rowBox}>
            <Col className={styles.textLightBlue}>
              用车要求
            </Col>
          </Row>
          {
            orderType === 1 && (
              <Row className={styles.rowBox}>
                <Col className={`${styles.clearfix} ${styles.textLightDark}`} span={2}>
                  <span className={styles.pullLeft}>运输方式</span>
                  <span className={styles.pullRight}>：</span>
                </Col>
                <Col className={styles.textGray} span={22}>
                  速运
                </Col>
              </Row>
            )
          }
          {
            orderType === 2 && (
              <React.Fragment>
                <Row className={styles.rowBox}>
                  <Col className={`${styles.clearfix} ${styles.textLightDark}`} span={2}>
                    <span className={styles.pullLeft}>用车时间</span>
                    <span className={styles.pullRight}>：</span>
                  </Col>
                  <Col className={styles.textGray} span={22}>
                    2018-11-08 12:00
                  </Col>
                </Row>
                <Row className={styles.rowBox}>
                  <Col className={`${styles.clearfix} ${styles.textLightDark}`} span={2}>
                    <span className={styles.pullLeft}>车辆类型</span>
                    <span className={styles.pullRight}>：</span>
                  </Col>
                  <Col className={styles.textGray} span={22}>
                    厢式货车
                  </Col>
                </Row>
                <Row className={styles.rowBox}>
                  <Col className={`${styles.clearfix} ${styles.textLightDark}`} span={2}>
                    <span className={styles.pullLeft}>用车数量</span>
                    <span className={styles.pullRight}>：</span>
                  </Col>
                  <Col className={styles.textGray} span={22}>
                    2
                  </Col>
                </Row>
              </React.Fragment>
            )
          }
          <Row className={styles.rowBox}>
            <Col className={`${styles.clearfix} ${styles.textLightDark}`} span={2}>
              <span className={styles.pullLeft}>车辆要求</span>
              <span className={styles.pullRight}>：</span>
            </Col>
            <Col className={styles.textGray} span={22}>
              全封闭
            </Col>
          </Row>
          <Row className={styles.rowBox}>
            <Col className={`${styles.clearfix} ${styles.textLightDark}`} span={2}>
              <span className={styles.pullLeft}>增值服务</span>
              <span className={styles.pullRight}>：</span>
            </Col>
            <Col className={styles.textGray} span={22}>
              保价运输、签收返单、开具发票
            </Col>
          </Row>
          <Row className={styles.rowBox}>
            <Col className={`${styles.clearfix} ${styles.textLightDark}`} span={2}>
              <span className={styles.pullLeft}>支付方式</span>
              <span className={styles.pullRight}>：</span>
            </Col>
            <Col className={styles.textGray} span={22}>
              预付款
            </Col>
          </Row>
          <Row className={styles.rowBox}>
            <Col className={`${styles.clearfix} ${styles.textLightDark}`} span={2}>
              <span className={styles.pullLeft}>备注</span>
              <span className={styles.pullRight}>：</span>
            </Col>
            <Col className={styles.textGray} span={22}>
              无
            </Col>
          </Row>
          <Row className={styles.rowBox}>
            <Col className={styles.textLightBlue}>
              其他信息
            </Col>
          </Row>
          <Row className={styles.rowBox}>
            <Col className={`${styles.clearfix} ${styles.textLightDark}`} span={2}>
              <span className={styles.pullLeft}>物流申请人</span>
              <span className={styles.pullRight}>：</span>
            </Col>
            <Col className={styles.textGray} span={22}>
              测试
            </Col>
          </Row>
          <Row className={styles.rowBox}>
            <Col className={`${styles.clearfix} ${styles.textLightDark}`} span={2}>
              <span className={styles.pullLeft}>联系方式</span>
              <span className={styles.pullRight}>：</span>
            </Col>
            <Col className={styles.textGray} span={22}>
              0571-8888888
            </Col>
          </Row>
          <Row className={styles.rowBox}>
            <Col className={`${styles.clearfix} ${styles.textLightDark}`} span={2}>
              <span className={styles.pullLeft}>报价有效期</span>
              <span className={styles.pullRight}>：</span>
            </Col>
            <Col className={styles.textGray} span={22}>
              2018-11-08 12:00 至 2018-11-08 12:00
            </Col>
          </Row>
          <Row className={styles.rowBox}>
            <Col className={styles.textLightBlue}>
              订单信息
            </Col>
          </Row>
          <Table
            bordered
            pagination={false}
            columns={columns}
            dataSource={orderData}
          />
        </Card>
      </div>
    );
  }
}
